/**
 * Created by DELL on 2017/5/25.
 *   Base 基类组件，所有的都继承此组件，代替继承Component
 *   页面 都放到pages文件夹下，若是不同模块可以在pages文件夹下创建模块文件夹
 */

import React ,{ Component }from 'react';
import {
    View,
    Modal,
    ActivityIndicator,
    Text,
    TouchableWithoutFeedback,

} from 'react-native';

//引入接口路径
import * as requests from '../utils/RequestConstant'
//引入字段常量;
import * as fields from '../utils/FieldConstant';
// 吐司方法
import * as toastUtil  from '../utils/ToastUtil';
//网络请求 ，工具类 ,  .js 可省略
import  Network from '../utils/Network.js' ;
import  Device from '../utils/Device.js' ;
//支付工具
import PayTool from '../utils/PayTool'
//样式控制
import  {styles,StyleConfig} from './Styles' ;




//变量区域
//倒计时
const TimerMixin = require('react-timer-mixin');
//保存本地工具类
const Store = require('react-native-simple-store');

var {
    toastShort,
    toastLong,
} = toastUtil;

var  network=new Network();//初始化完成完成网络请求对象
var  device=new Device();//初始化完成完成设备对象
var  payTool=new PayTool();//初始化完成 支付工具




export const base={
    Store,
    toastShort,
    TimerMixin,
    fields,
    requests,
    network,
    styles,
    StyleConfig,
    device,
    payTool,

}

export default class BaseComponent extends Component {



}


//加载时显示进度框
export  class AppIndictor extends BaseComponent {
    /**
     * @param modalVisible
     * @text 加载描述语
     *
     */


    render() {
        let descText=this.props.text;
        if(!descText){
            descText="加载中..."
        }
        return (
            <Modal
                animationType={"fade"}
                transparent={true}
                visible={this.props.modalVisible}
                onRequestClose={() => {this.props.onRequestClose
                }}
            >
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:'transparent'}}>
                    <View style={{backgroundColor:'#fff',borderRadius:5,padding:10}}>
                        <ActivityIndicator
                            color={this.props.color}
                            style={[this.props.style]}
                            animating={this.props.modalVisible}
                            size={this.props.size}/>
                        <Text style={{marginTop:10,marginBottom:10}}>{descText}</Text>
                    </View>

                </View>
            </Modal>
        )
    }
}

//普通提示对话框
export  class AppCustomDialog extends BaseComponent {
    /**
     * @param modalVisible:控制dialog的显示与否
     * @param onLeftPress 左边点击事件
     * @param onRightPress 右边点击事件
     * @param dialogBackgroundColor dialog总体的背景颜色，默认是0.3透明度黑色
     * @param dialogTitle 标题
     * @param dialogMessage 提示内容
     * @param dialogOnLeftTitle 左边显示按钮标题
     * @param dialogOnLeftTitleColor 左边显示按钮标题颜色
     * @param dialogOnRightTitle 右边显示按钮标题
     * @param dialogOnRightTitleColor 右边显示按钮标题颜色
     *
     * @param props
     */
    constructor(props){
        super(props);
        this.state={
            dialogBackgroundColor:this.props.dialogBackgroundColor,
            dialogTitle:this.props.dialogTitle,
            dialogMessage:this.props.dialogMessage,
            dialogOnLeftTitle:this.props.dialogOnLeftTitle,
            dialogOnLeftTitleColor:this.props.dialogOnLeftTitleColor,
            dialogOnRightTitle:this.props.dialogOnRightTitle,
            dialogOnRightTitleColor:this.props.dialogOnRightTitleColor,

        }

    }
    render() {
        let dialogBackgroundColor=this.state.dialogBackgroundColor;
        if(!dialogBackgroundColor){
            dialogBackgroundColor='rgba(0,0,0,0.3)'
        }
        let dialogTitle=this.state.dialogTitle;
        if(!dialogTitle){
            dialogTitle='提示';
        }
        let dialogMessage=this.state.dialogMessage;
        if(!dialogMessage){
            dialogMessage='友情提示'
        }

        let dialogOnLeftTitle=this.state.dialogOnLeftTitle;
        if(!dialogOnLeftTitle){
            dialogOnLeftTitle='取消'
        }
        let dialogOnLeftTitleColor=this.state.dialogOnLeftTitleColor;
        if(!dialogOnLeftTitleColor){
            dialogOnLeftTitleColor='#212121'
        }
        let dialogOnRightTitle=this.state.dialogOnRightTitle;
        if(!dialogOnRightTitle){
            dialogOnRightTitle='确定'
        }
        let dialogOnRightTitleColor=this.state.dialogOnRightTitleColor;
        if(!dialogOnRightTitleColor){
            dialogOnRightTitleColor='#212121'
        }

        return (
            <Modal
                animationType={"fade"}
                transparent={true}
                visible={this.props.modalVisible}
                onRequestClose={() => {this.props.onRequestClose
                }}
            >
                <View style={{flex: 1, justifyContent: 'center', alignItems: 'center',backgroundColor:dialogBackgroundColor}}>
                    <View style={{ justifyContent: 'center', alignItems: 'center',backgroundColor:'#fff',width:'45%',borderRadius:10}}>
                        <Text style={{marginBottom:10,marginTop:10}}>{dialogTitle}</Text>
                        <View  style={{backgroundColor:'#f5f5f5',height:1,width:'40%'}}/>
                        <Text style={{marginBottom:15,marginTop:15,paddingLeft:10,paddingRight:10}}>{dialogMessage}</Text>

                        <View  style={{flexDirection:'row',marginBottom:10,marginTop:10}}>
                            <TouchableWithoutFeedback onPress={this.props.onLeftPress}>
                                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                    <Text style={{color:dialogOnRightTitleColor}}>{dialogOnLeftTitle}</Text>
                                </View>

                            </TouchableWithoutFeedback>
                            <View style={{backgroundColor:'#f5f5f5',width:1}}/>
                            <TouchableWithoutFeedback onPress={this.props.onRightPress}
                            >
                                <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                                    <Text style={{color:dialogOnRightTitleColor}}>{dialogOnRightTitle}</Text>
                                </View>

                            </TouchableWithoutFeedback>

                        </View>

                    </View>
                </View>
            </Modal>
        )
    }
}





